<!-- BEGIN: ACCORDION DEMO -->
<div class="toolbar">
    <div class="page-bar">
        <ul class="page-breadcrumb float-right">
            <li>
                <i class="fa fa-home"></i>
                <a [routerLink]="['/index/home']">管理中心</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a [routerLink]="['/index/category']">分类导航管理</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="javascript:;">{{appServ.pageTitle}}</a>
            </li>
        </ul>
        <h1 class="page-title"> <i class="icon-note font-green-sharp"></i> {{appServ.pageTitle}}</h1>
    </div>
</div>

<div class="dataform">
    <form class="form-horizontal" name="editForm" #editForm="ngForm" role="form" novalidate>
        <input type="hidden" ng-model="data.Id">
        <div class="form-body">
            <div class="form-group row">
                <label for="CategoryName" class="col-2 col-form-label">分类名称:</label>
                <div class="col-4">
                    <input type="text" [(ngModel)]="dataInfo.CategoryName" name="CategoryName" minlength="2" maxlength="30" class="form-control" placeholder="分类名称" required>
                </div>
                <label for="RedirectUrl" class="col-2 col-form-label">跳转url:</label>
                <div class="col-4">
                    <input type="text" [(ngModel)]="dataInfo.RedirectUrl" name="RedirectUrl" maxlength="255" class="form-control" placeholder="跳转url">
                </div>
            </div>
            <div class="form-group row" ng-if="data.Id==0">
                <label class="col-2 col-form-label">所属分类:</label>
                <div class="col-4">
                    <div class="input-group">
                        <span class="form-control">{{selectedCategorys.CategoryName}}</span>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" (click)="showCategoryTree=!showCategoryTree">
                                <i class="fa fa-angle-down"></i>
                            </button>
                        </div>
                    </div>
                    <div class="categorys" *ngIf="showCategoryTree">
                        <p-tree (onNodeSelect)="categorySelect($event)" [value]="categorys" [styleClass]="'full-width'" selectionMode="single" [(selection)]="selectedCategorys"></p-tree>
                    </div>
                </div>
                <label class="col-2 col-form-label">扩展属性:</label>
                <div class="col-4">
                    <input type="text" [(ngModel)]="dataInfo.ExtAttrib" name="ExtAttrib" maxlength="30" class="form-control" placeholder="扩展属性">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label">Logo:</label>
                <div class="col-4">
                    <div class="input-group">
                        <input type="text" class="form-control input-medium" [(ngModel)]="dataInfo.LogoImg" name="Logo" id="Logo" placeholder="可以直接填写Url地址" />
                        <div class="btn-group">
                            <file-upload class="btn blue" (fileSelect)="fileSelect($event)" [fileType]="'image/*'" [fileTypeErr]="'上传文件类型不正确'" [fileMaxSize]="'500KB'" [fileMaxSizeErr]="'文件太大了'"> <i class="icon-picture"></i> 选择图片</file-upload>
                            <button class="btn green" name="btnPreviewLogo" (click)="imgPreview.toggle($event)" *ngIf="dataInfo.LogoImg"> <i class="icon-eye"></i> 预览 </button>
                            <button class="btn btn-danger" name="btnClearLogo" *ngIf="dataInfo.LogoImg" (click)="dataInfo.LogoImg=''"> <i class="icon-trash"></i> 清除 </button>
                        </div>
                    </div>
                </div>
                <label class="col-2 col-form-label">每页显示记录数:</label>
                <div class="col-4">
                    <input type="number" min="1" max="100" [(ngModel)]="dataInfo.PageSize" name="PageSize" maxlength="30" class="form-control" placeholder="每页显示记录数">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label">摘要信息:</label>
                <div class="col-10">
                    <textarea name="Description" maxlength="255" id="Description" [(ngModel)]="dataInfo.Description" placeholder="摘要信息" class="form-control" rows="3"></textarea>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label">分类说明:</label>
                <div class="col-10">
                    <tiny-editor [elementId]="'my-editor-id'" [(value)]="dataInfo.Content">
                    </tiny-editor>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label">风格:</label>
                <div class="col-6">
                    <select (ngModelChange)="onStyleChange($event)" name="StyleName" class="form-control input-inline" id="StyleName" [(ngModel)]="dataInfo.StyleName">
                        <option value="" selected>---请选择---</option> 
                        <option [value]="item.Folder" *ngFor="let item of styleList" >{{item.StyleName}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group row" ng-if="data.Id==0">
                <label class="col-2 col-form-label">分类模板:</label>
                <div class="col-4">
                    <select name="TmplName" class="form-control input-inline" id="TmplName" [(ngModel)]="dataInfo.TmplName">
                        <option value="" selected>---请选择---</option> 
                        <option [value]="item.name" *ngFor="let item of listTmpl" >{{item.name}}</option>
                    </select>
                </div>
                <label class="col-2 col-form-label">文章模板:</label>
                <div class="col-4">
                    <select name="ArticleTmplName" class="form-control input-inline" id="ArticleTmplName" [(ngModel)]="dataInfo.ArticleTmplName">
                        <option value="" selected>---请选择---</option> 
                        <option [value]="item.name" *ngFor="let item of articleTmpl" >{{item.name}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group row" ng-if="data.Id==0">
                <label class="col-2 col-form-label">移动分类模板:</label>
                <div class="col-4">
                    <select name="MobileTmplName" class="form-control input-inline" id="MobileTmplName" [(ngModel)]="dataInfo.MobileTmplName">
                        <option value="" selected>---请选择---</option> 
                        <option [value]="item.name" *ngFor="let item of mobListTmpl" >{{item.name}}</option>
                    </select>
                </div>
                <label class="col-2 col-form-label">移动文章模板:</label>
                <div class="col-4">
                    <select name="ArticleMobileTmplName" class="form-control input-inline" id="ArticleMobileTmplName" [(ngModel)]="dataInfo.ArticleMobileTmplName">
                        <option value="" selected>---请选择---</option> 
                        <option [value]="item.name" *ngFor="let item of mobArticleTmpl" >{{item.name}}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-actions">
            <hr/>
            <div class="row">
                <div class="col-md-12 text-center">
                    <button class="btn green" (click)="dataSave()" [disabled]="!editForm.form.valid"> <span class="fa fa-save"></span> 保存</button>
                </div>
            </div>
        </div>
    </form>

</div>
<p-overlayPanel #imgPreview appendTo="body">
    <img [src]="dataInfo.LogoImg" />
</p-overlayPanel>